<template>
	<view class="notification-list">
		<view v-for="(item,index) in list" :key="index" @click="goToDetail(item)">
			<view class="notification-item">
				<view class="left-box">
					<u-avatar :src="item.type==='1'?imageUrl(item.avatar):'/static/platform/avatar/system-avatar.png'"
						size="mini" :show-level="item.type==='1'" level-icon="/static/aidex/images/official.png"
						level-bg-color="#ffffff"></u-avatar>
				</view>
				<view class="right-box">
					<view class="head">
						<text class="username">{{item.type==='1'?item.userName:item.title}}</text>
						<text class="createTime">{{formatTimeText(item.createTime)}}</text>
					</view>
					<view class="bottom" style="position: relative">
						<text class="content">{{item.type==='1'?item.postTitle:item.content}}</text>
						<u-badge class="unread-count" :offset="[0,10]" type="error"
							:count="item.type==='1'?item.regionUnread:item.systemUnread"></u-badge>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "notification-list",
		props: {
			list: {
				type: Array
			}
		},
		data() {
			return {

			};
		},
		filters: {},
		methods: {
			goToDetail(item) {
				let param = item.type
				if (item.type === '1') {
					param = param + "&uid=" + item.postUserId
				}
				uni.navigateTo({
					url: '/pages/platform/notification/notification-detail?type=' + param
				});
			},
			imageUrl(itemUrl) {
				return this.handleUrl(itemUrl)
			},
			formatTimeText(dateString) {
				return uni.$u.timeFrom(new Date(dateString), false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.notification-list {
		padding: 0 10rpx;

		.notification-item {
			display: flex;
			margin: 30rpx 20rpx;
			margin-bottom: 50rpx;


			.left-box {
				margin-right: 20rpx;
			}

			.right-box {
				flex: 1;
				color: #999;

				.head {
					display: flex;
					justify-content: space-between;

					.username {
						margin-bottom: 10rpx;
						color: #000;
						font-size: 15px;
						font-weight: 700;
					}

					.createTime {}
				}

				.bottom {
					.content {
						margin-right: 80rpx;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
						word-break: break-all;
					}
				}

				.unread-count {}
			}
		}


	}
</style>